<template>
  <view class="box-bg">
    <uni-nav-bar color="#F7F7F7" left-icon="left" backgroundColor="#3485FD" height="65px" title="确认订单" @clickLeft="back" />
  </view>
  <view class="main1"></view>
  <view class="main2">
    <uni-card class="main2-card">
      <view class="liucheng">
        <view class="liucheng-text">
          预约服务
        </view>
        <view class="t-view"></view>
        <view class="liucheng-text">
          支付订单
        </view>
        <view class="t-view"></view>
        <view class="liucheng-text">
          门店服务
        </view>
      </view>
      <view class="card-image-view">
        <image class="img" src="/static/yuan3.png" mode=""></image>
        <view class="img-view"></view>
        <image class="img" src="/static/yuan2.png" mode=""></image>
        <view class="img-view"></view>
        <image class="img" src="/static/yuan1.png" mode=""></image>
      </view>
      <view class="main3">
        <view class="shops">
          <image class="image" src="/static/shop.png" mode=""></image>
          <view class="shop-view">
            <view class="shop-name">
              伟业汽车美容店（人民路店）	
            </view>	
            <view class="addres">
              山阳区人民中路33号	
            </view>	
          </view>
        </view>
        <view class="people-view">
          <image class="image" src="/static/people.png" mode=""></image>
          <view class="people-name">
            <view class="people-name-t">
              张先生
            </view>
            <view class="tel">
              18656894566
            </view>
          </view>	
        </view>
        <view class="car-view">
          <image class="image" src="/static/car.png" mode=""></image>
          <view class="car">
            <view class="car-name">
              奔驰FWE4/豫A56487
            </view>
            <image class="image-right" src="/static/youjiantou.png" mode=""></image>
          </view>
        </view>
        <view class="service-view">
          <view class="service">
            服务产品
          </view>
          <view class="service-number">
            共选择<text>1项</text>服务产品
          </view>
        </view>
        <view class="price-views">
          <view class="wash-car">
            精洗汽车
          </view>
          <view class="price-number">
            ￥39.9
          </view>
        </view>
        <view class="pay-view">
          <image class="image" src="/static/youhuquan.png" mode=""></image>
          <view class="pay">
            <view class="youhuiquan">
              代金券/优惠券
            </view>
            <view class="num">
              <view class="number">
                -10元
              </view>
              <image class="image-right" src="/static/youjiantou.png" mode=""></image>
            </view>
          </view>
        </view>
      </view>
    </uni-card>
  </view>
  <view class="bot">
    <view class="fuwu" @click="toggle('bottom')">
      <image class="images" src="/static/kefu.png" mode=""></image>
      <view class="kefu">
        联系客服
      </view>	
    </view>
    <view class="sm">
      <view class="money">
        合计：￥39.9
      </view>
      <button class="but" @click="showPayPopup">提交订单</button>
    </view>
    <uni-popup ref="payPopup" type="center" :mask-closable="false" class="custom-popup" >
      <view class="popup-content">
        <view class="popup-header">
          <view class="close-icon" @click="closePopup">×</view>
          <view class="title">请输入支付密码</view>
        </view>
        <view class="order-info">
          <view class="platform">车辆服务平台</view>
          <view class="price-number">
            <text>￥</text>
            <text>{{ price }}</text>
          </view>
        </view>
        <view class="payment-method">
          <view class="method-label">支付方式</view>
          <view class="method-value">零钱</view>
          <view class="arrow-icon"></view>
        </view>
        <view class="password-box">
          <!-- 视觉密码方框（固定位置） -->
          <view class="password-visual">
            <view 
              v-for="index in 6" 
              :key="index" 
              class="password-item"
            ></view>
          </view>
          
          <!-- 实际输入框（覆盖在方框上方） -->
          <input
            ref="passwordInput"
            type="password"
            v-model="password"
            :maxlength="6"
            @input="handleInput"
            class="password-input"
          />
        </view>
        
        <!-- 底部按钮 (新增) -->
        <view class="button-group">
          <button @click="closePopup">取消</button>
          <button @click="confirmPayment" :disabled="password.length !== 6">确认支付</button>
        </view>
      </view>
    </uni-popup>
    <uni-popup ref="popup" background-color="#fff" >
      <view class="main4" :class="{ 'popup-height': type === 'left' || type === 'right' }">
        <view class="lianxi">
          <text>18642589456</text>
        </view>
        <view class="lianxi">
          <text>复制</text>
        </view>
        <view class="lianxi">
          <text>取消拨号</text>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'

// 响应式数据
const type = ref('center')
const password = ref('')
const price = ref('39.90')

// DOM 引用（注意：payPopup 需正确绑定到 uni-popup 的 ref）
const payPopup = ref(null) // 支付弹窗的 ref
const passwordInput = ref(null)
const passwordVisual = ref(null)

// 生命周期钩子
onMounted(() => {
  passwordVisual.value = document.querySelector('.password-visual')
})

// 方法
const back = () => {
  uni.navigateBack()
}

const showPayPopup = () => {
  password.value = ''
  payPopup.value?.open() // 打开弹窗
  
  nextTick(() => {
    passwordInput.value?.focus() // 聚焦输入框
  })
}

const closePopup = () => {
  payPopup.value?.close() // 关闭弹窗的方法
}

const confirmPayment = () => {
  if (password.value.length !== 6) {
    uni.showToast({ 
      title: '请输入6位支付密码',
      icon: 'none'
    })
    return
  }

  uni.showLoading({ 
    title: '支付处理中...'
  })

  setTimeout(() => {
    uni.hideLoading() 
    uni.showModal({ 
      title: '支付成功',
      content: '订单支付成功，感谢您的使用！',
      showCancel: false,
      success: () => {
        closePopup() // 支付成功后调用关闭弹窗方法
      }
    })
  }, 1000)
}
</script>

<style>
	.box-bg{
		position: fixed;
		width: 100%;
		top: 0;
		z-index: 1000;
	}
	.main1{
		background-color: #1168EA;
		padding: 25rpx;
		padding-bottom: 140rpx;
		margin-top: 115rpx;
		height: 150rpx;
	}
	.main2{
		position: relative;
		top: -300rpx;
	}
	.main3{
		margin-top: 50rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 500rpx;
		margin-bottom: 40rpx;
	}
	.card-image-view{
		display: flex;
		padding: 40rpx 20rpx 50rpx 20rpx;
		border-bottom: 6rpx solid #E5E5E5;
	}
	.liucheng{
		display: flex;
		position: absolute;
		z-index: 100;
		left:87rpx;
		top:78rpx;
		font-weight: 600;
	}
	.liucheng-text{
		width: 80rpx;
		height: 30rpx;
		font-size: 28rpx;
		border-radius: 50%;
		color: white;
	}
	.img{
		width: 120rpx;
		height: 120rpx;
	}
	.img-view{
		width: 100rpx;
		border: 1rpx solid #E5E5E5;
		height: 0rpx;
		margin: auto;
	}
	.t-view{
		width: 152rpx;
		height: 0rpx;
		margin: auto;
	}
	.shops,.pay,.num,.people-view,.car-view,.sm,.fuwu,.bot,.service-view,.service-view,.price-views,.pay-view,.people-name,.car{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.image{
		height: 30rpx;
		width: 30rpx;
	}
	.image-right{
		height: 30rpx;
		width: 20rpx;
	}
	.shops{
		width: 440rpx;
	}
	.shop-name,.people-name-t,.car-name,.service-view,.wash-car,.price-number,.pay{
		color: #000;
		font-size: 30rpx;
		font-weight: 400;
	}
	.people-name,.car,.pay{
		width: 575rpx;
	}
	.tel{
		font-size: 30rpx;
	}
	.price-views{
		width: 100%;
	}
	.price-number{
		color: red;
	}
	text{
		color: #3485FD;
	}
	.num{
		width: 120rpx;
	}
	.number{
		color: red;
	}
	.images{
		height: 35rpx;
		width: 35rpx;
	}
	.fuwu{
		width: 160rpx;
	}
	.sm{
		width: 500rpx;
	}
	.bot{
		background-color: #fff;
		padding: 20rpx 20rpx 20rpx 20rpx;
		position: fixed;
		bottom:0rpx;
		width: 100%;
	}
	.but{
		background-color: #0762E6;
		color: white;
		border-radius: 50rpx;
		width: 250rpx;
	}
	.money{
		color: red;
		font-weight: 600;
	}
	.main4{
/* 由于 @include 是 Sass/Less 等预处理器的指令，原生 CSS 不支持，
   这里将其替换为对应的 flex 布局属性 */
        display: flex;
		align-items: center;
		justify-content: center;
		padding-bottom: 20px;
		height: 120px;
		background-color: #fff;
	}
	.lianxi{
		  font-size: 35rpx;
		  display: flex;
		  justify-content: center;
		  margin-top: 20rpx;
		  margin-bottom: 20rpx;
	}
	.lianxi>text{
		color: #000;
	}
	.popup-content {
	  width: 80%;
	  max-width: 400px;
	  padding: 20px;
	  background-color: white;
	  border-radius: 12px;
	}
	.popup-header {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  margin-bottom: 15px;
	}
	.close-icon {
	  font-size: 20px;
	  cursor: pointer;
	}
	.title {
	  font-size: 18px;
	  font-weight: bold;
	  margin-right: 25%;
	}
	.order-info {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  margin-bottom: 15px;
	}
	.platform {
	  font-size: 14px;
	  color: #666;
	}
	.price {
	  font-size: 24px;
	  font-weight: bold;
	}
	.payment-method {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  border-bottom: 1px solid #e5e5e5;
	  padding-bottom: 10px;
	  margin-bottom: 15px;
	}
	.method-label {
	  font-size: 14px;
	  color: #666;
	}
	.method-value {
	  font-size: 14px;
	  margin-left: 65%;
	}
	.arrow-icon {
	  width: 0;
	  height: 0;
	  border-left: 6px solid transparent;
	  border-right: 6px solid transparent;
	  border-top: 6px solid #666;
	}
	.password-box {
	  position: relative; /* 容器设为相对定位 */
	  height: 60px; /* 固定高度，与方框高度一致 */
	  margin: 20px 0;
	}
	
	.password-visual {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  height: 100%;
	}
	
	.password-item {
	  position: relative; /* 为伪元素提供定位参考 */
	  overflow: hidden; /* 隐藏超出部分 */
	  width: 48px; /* 单个方框宽度 */
	  height: 48px; /* 单个方框高度 */
	  border: 2px solid #e5e5e5;
	  border-radius: 6px;
	  background: white;
	  /* 关键：通过伪元素模拟输入内容 */
	  &::after {
	    content: attr(data-char); /* 动态获取字符 */
	    font-size: 20px;
	    color: #3485FD;
	    opacity: 0; /* 初始隐藏 */
	    transition: opacity 0.2s;
	  }
	}
	
	.password-item::after {
	  content: ""; /* 清空原有字符内容 */
	  width: 12px; /* 圆点宽度 */
	  height: 12px; /* 圆点高度 */
	  background-color: #3485FD; /* 圆点颜色 */
	  border-radius: 50%; /* 圆形 */
	  position: absolute; /* 绝对定位 */
	  left: 50%; /* 水平居中 */
	  top: 50%; /* 垂直居中 */
	  transform: translate(-50%, -50%); /* 精准定位到中心 */
	  opacity: 0; /* 初始隐藏 */
	  transition: opacity 0.2s; /* 渐显动画 */
	}
	
	/* 当输入内容存在时显示圆点 */
	.password-item[data-char]::after {
	  opacity: 1; /* 显示圆点 */
	}
	
	/* 移除原有字符颜色（可选，若伪元素未完全覆盖） */
	.password-item::after {
	  color: transparent; /* 隐藏可能残留的字符 */
	}
	.password-input {
	  position: absolute; /* 绝对定位覆盖上方 */
	  top: 0;
	  left: 0;
	  height: 100%;
	  opacity: 0; /* 透明但可交互 */
	  z-index: 1; /* 层级高于视觉方框 */
	  /* 禁止文本选择和键盘样式 */
	  -webkit-user-select: none;
	  -moz-user-select: none;
	  user-select: none;
	  caret-color: transparent; /* 隐藏光标 */
	}
	.empty-item {
	  width: 24px;
	  height: 24px;
	  border: 2px solid #e5e5e5;
	  border-radius: 2px;
	}
	.password-item text {
	  color: #3485FD;
	}
	.button-group {
	  display: flex;
	  margin-top: 20px;
	}
	
	.button-group button {
	  flex: 1;
	  margin: 0 10px;
	  padding-bottom: 2rpx;
	}
	.custom-popup .uni-popup {
	  display: flex !important;
	  justify-content: center;
	  align-items: center;
	}
	
	/* 弹窗内容 */
	.custom-popup .uni-popup__content {
	  width: 90%; /* 自定义宽度 */
	  max-width: 400px; /* 最大宽度限制 */
	  margin: auto; /* 水平居中 */
	  transform: none !important; /* 移除默认偏移 */
	}
</style>